<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>信息展示</title>
    <link href="https://cdn.bootcss.com/normalize/7.0.0/normalize.css" rel="stylesheet">
    <link href="./css/bootstrap.css" rel="stylesheet">
    <script src="./js/jquery.js"></script>
    <script src="./js/bootstrap.js"></script>
    <script src="./js/constants.js"></script>
    <style>
        .data {
            padding: 10px;
            border-bottom: 1px solid #eee;
        }
    </style>
    <script>
        $(function () {
            let data = {
                page: 1,
                size: 10
            }
            $.get("http://localhost:8080/customer/list", data, function (result) {
                if (result.status === 200) {
                    let page = result.data

                    if (page.data.length > 0) {
                        for (let i = 0; i < page.data.length; i++) {
                            let customer = page.data[i]
                            $("#content")
                                .append(
                                    $("<tr>")
                                        .append(
                                            //添加客户名称
                                            $("<td>")
                                                .text(customer.cName)
                                                .addClass("text-center")
                                        )
                                        // 添加所属行业
                                        .append(
                                            $("<td>")
                                                .text(customer.cIndustry)
                                                .addClass("text-center")
                                        )
                                        // 所在城市
                                        .append(
                                            $("<td>")
                                                .text(customer.cCity)
                                                .addClass("text-center")
                                        )
                                        // 联系人
                                        .append(
                                            $("<td>")
                                                .text(customer.cLinkman)
                                                .addClass("text-center")
                                        )
                                        // 操作
                                        .append(
                                            $("<td>")
                                                .append(
                                                    $("<button class='btn btn-info off col-lg-offset-3'>客户详情</button>").click(function () {
                                                        window.location.href = "detailedMSG.html?id=" + customer.cid
                                                    }))
                                                .append($("<button class='btn btn-danger col-lg-offset-2'>删除</button>").click(function () {
                                                    let data = {
                                                        id:customer.cid
                                                    }
                                                    alert("id="+data.id)
                                                    $.get("http://localhost:8080/customer/delete", data, function (result) {
                                                        alert(1)
                                                        if (result.status){
                                                            alert(result.status)
                                                            window.location.href = "listPage.html"
                                                        }
                                                    })
                                                }))
                                        )
                                )
                        }
                    } else {
                        $("#content")
                            .before($("<p>暂无数据</p>"))
                            .hide();
                    }

                    /**
                     <li>
                        <a href="#" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                     </li>
                     */

                    $("<li>")
                        .append($("<a aria-label='Previous'></a>")
                            .append($("<span aria-hidden='true'></span>")
                                .html("&laquo"))
                        )

                    for (let i = 0;i < Math.ceil(page.total/page.size);i++) {
                        $("#pag").append(
                            $("<li>")
                                .append($("<a href='#' id='yema'>" + (i + 1) + "</a>")).click(function () {
                                    let ye = {
                                        page:(i+1),
                                        size:10
                                    }
                                    $.get("http://localhost:8080/customer/list", data, function (result) {
                                        if (result.status === 200){
                                            window.location.href = "listPage.html"
                                        }
                                })
                            })
                        )
                    }

                } else {
                    $("#content")
                        .before($("<p>暂无数据</p>"))
                        .hide();
                }
            })
        })
        $(function (){
            $("#customer").click(function (){
                window.location.href = "addCustomer.html"
            })
        })
        $(function (){
            $("#clssify").click(function (){
                let cClassify = $("#feilei").val()
                window.location.href = "classify.html?classification="+cClassify
            })
        })
        $(function (){
            $("#query").click(function (){
                let querySelect = $("#select").val()
                window.location.href = "pirmaryquery.html?primaryKey="+querySelect
            })
        })

    </script>
</head>
<body>
<div id="warp" class="container-fluid">
    <div style="margin-top: 35px">
        <div class="col-lg-2">
          <select id="feilei" name="cClassify">
              <option value="one">一级分类</option>
              <option value="two">二级分类</option>
              <option value="three">三级分类</option>
          </select>
          <button id="clssify" type="button">查询</button>
        </div>
        <div class="col-lg-3">
            <input id="select" name="query" type="text" value="请输入关键字">
            <button type="button" id="query"><span class="glyphicon glyphicon-search">查找</span></button>
        </div>
        <div class="col-lg-offset-5 col-lg-2">
            <button type="button" id="customer"><span class="glyphicon glyphicon-plus"></span>新增客户</button>
        </div>
    </div>
    <table id="content" class="table table-bordered table-condensed" style="margin-top: 90px">
        <tr>
            <th class="text-center">客户名称</th>
            <th class="text-center">所属行业</th>
            <th class="text-center">所在城市</th>
            <th class="text-center">联系人</th>
            <th class="text-center">操作</th>
        </tr>
    </table>
    <!--<nav aria-label="Page navigation" class="col-lg-offset-4">
        <ul id="pag" class="pagination">
            <li id="last">
                <a href="#" aria-label="Previous">
                    <span aria-hidden="true">&laquo;</span>
                </a>
            </li>
            &lt;!&ndash;<li><a href="#" class="indexPage">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>&ndash;&gt;
            <li id="end">
                <a href="#" aria-label="Next">
                    <span aria-hidden="true">&raquo;</span>
                </a>
            </li>
        </ul>
    </nav>-->
</div>

</body>
</html>